import React from 'react';

import Link from 'next/link';

import { Calendar, Clock } from 'lucide-react';

import Tag from '@/components/tag';
// import TagList from '@/components/tag-list';

import { cn, prettyDate } from '@/utils/utils';

import { PATHS } from '@/constants';

import { type Blog } from '../types';

type BlogListItemProps = {
    blog: Blog;
};

export const BlogListItem = ({ blog }: BlogListItemProps) => {
    return (
        <Link
            href={`${PATHS.SITE_BLOG}/${blog.slug}`}
            className={cn(
                'group relative flex flex-col justify-between h-full text-primary p-4 transition-all duration-300 rounded-xl overflow-hidden',
                'border border-border/50 bg-card/50 backdrop-blur-sm',
                'hover:border-border hover:shadow-lg hover:shadow-primary/5 dark:hover:bg-accent/80 hover:bg-accent/30',
                'hover:scale-[1.02] hover:-translate-y-1',
                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
            )}
        >
            {/* 装饰性渐变背景 */}
            <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-secondary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

            <div className="relative z-10 flex flex-col h-full">
                {/* 标题区域 */}
                <div className="mb-3">
                    <h4 className="mb-2 line-clamp-2 text-xl leading-tight group-hover:text-primary transition-colors duration-200" title={blog.title}>
                        {blog.title}
                    </h4>
                    <p className="line-clamp-2 text-sm text-muted-foreground leading-relaxed min-h-[2.5rem]" title={blog.description}>
                        {blog.description}
                    </p>
                </div>

                {/* 底部信息区域 */}
                <div className="mt-auto space-y-3">
                    {/* 日期信息 */}
                    <div className="flex items-center space-x-2 text-xs text-muted-foreground">
                        <div className="flex items-center space-x-1.5 px-2 py-1 rounded-md bg-muted/50">
                            <Calendar className="size-3.5" />
                            <time dateTime={new Date(blog.createdAt).toISOString()}>
                                {prettyDate(blog.createdAt)}
                            </time>
                        </div>
                    </div>

                    {/* 标签区域 */}
                    {blog.tags && blog.tags.length > 0 && (
                        <div className="flex flex-wrap gap-1.5">
                            {blog.tags.slice(0, 3).map((tag: string, index: React.Key | null | undefined) => (
                                <Tag text={tag} key={index} />
                            ))}
                            {blog.tags.length > 3 && (
                                <span className="text-xs text-muted-foreground px-2 py-1 rounded-md bg-muted/30">
                                    +{blog.tags.length - 3}
                                </span>
                            )}
                        </div>
                    )}
                </div>
            </div>

            {/* 右上角装饰 */}
            <div className="absolute top-4 right-4 w-2 h-2 rounded-full bg-primary/20 group-hover:bg-primary/40 transition-colors duration-300" />
        </Link>
    );
};
